<template>
  <div class="btnDetail">
    <el-dialog class="dialog600" :close-on-click-modal="false" :append-to-body="true" title="预警信息详情" :visible.sync="dialogFormVisibleAdd" @opened="$store.commit('dialogTop')" @close="resetForm()">
      <div style="margin: 5px 0;">
        <el-row >
          <el-col  :span="6">
            <div style="line-height: 35px;font-size:13px;">
              <span style="color:#50545D; ">区域名称：</span>
              <span style="color:#3975FE;font-weight: bold;">{{info.areaName}}</span>
            </div>

          </el-col>
          <el-col :span="4" v-show="info.areaType !=1">
            <div style="line-height: 35px;font-size:13px;">
              <span style="color:#50545D; ">预警阈值：</span>
              <span style="color:#3975FE;font-weight: bold;">{{info.areaAlarmValue}}</span>
            </div>
          </el-col>
          <el-col :span="4" v-show="info.areaType !=1">
            <div style="line-height: 35px;font-size:13px;">
              <span style="color:#50545D; ">可停放数量：</span>
              <span style="color:#3975FE;font-weight: bold;">{{info.areaParkValue}}</span>
            </div>
          </el-col>
          <el-col :span="4" v-show="info.areaType ==1">
            <div style="line-height: 35px;font-size:13px;">
              <span style="color:#50545D; ">违停数量：</span>
              <span style="color:#3975FE;font-weight: bold;">{{info.vehicleTotal}}</span>
            </div>
          </el-col>
          <el-col :span="3" v-for="(item,index) in info.park" :key="index">
            <div style="line-height: 35px;font-size:13px;">
              <span style="color:#50545D; ">{{item.enterpriseName}}：</span>
              <span style="color:#3975FE;font-weight: bold;" >{{item.parkCount}}</span>
            </div>
          </el-col>
        </el-row>
        <mapEcharts :chartInfo="info.chart" ref="mapecharts"></mapEcharts>
       </div>
    </el-dialog>
  </div>
</template>

<script>
  import mapEcharts from "./mapEcharts.vue"
  export default {
    props:[],
    data () {
      return {
        info: {
          park:{
            packCount:{}
          }
        },
        dialogFormVisibleAdd: false,
      }
    },
    components:{mapEcharts},
    created(){

    },
    methods: {
      //提交回调
      dialogOpen(id){
        this.axios.post(process.env.API_HOST + '/vehicle/selectAlarmDetail', {id:id})
          .then(response => {
            let result=response.data
            if (result.code == 200) {
              this.info=result.result
              this.dialogFormVisibleAdd = true
              setTimeout(()=>{
                this.$refs.mapecharts.initData()
              })
            }
          })
          .catch(error => {
            console.log(error);
          });
      },

      resetForm(formName) {
        this.info={}
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" >
  @import "../../../common/stylus/mixin.styl"
  .btnDetail
    display inline-block
  .dialog600 .el-dialog
    width 1000px !important
    font-family 'SourceHanSansCN-Medium'
    text-align left


</style>
